<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <org-tree
        :dcksValue.sync="listQuery.orgCode"
        :dcksLabel.sync="listQuery.orgDescr"
        :checkStrictly="false"
        :isDialog="true"
      ></org-tree>
      <el-date-picker
        id="dp"
        v-model="dateSech"
        type="daterange"
        @change="dateSechChange"
        align="right"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      ></el-date-picker>
      <el-input
        @keyup.enter.native="handleFilter"
        style="width: 200px"
        v-model="listQuery.item"
        placeholder="培训项目"
        clearable
      ></el-input>
      <el-input
        @keyup.enter.native="handleFilter"
        style="width: 200px"
        v-model="listQuery.teacher"
        placeholder="授课人"
        clearable
      ></el-input>
      <el-select v-model="listQuery.enable" placeholder="培训状态" clearable>
        <el-option label="未完成" value="0"></el-option>
        <el-option label="已完成" value="1"></el-option>
        <el-option label="取消" value="-1"></el-option>
      </el-select>
      <el-select v-model="listQuery.level" placeholder="优先级别" clearable>
        <el-option label="高" value="0"></el-option>
        <el-option label="中" value="1"></el-option>
        <el-option label="低" value="2"></el-option>
      </el-select>
      <el-select v-model="listQuery.type" placeholder="类型" clearable>
        <el-option label="月计划" value="0"></el-option>
        <el-option label="临时计划" value="1"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button>
      <el-checkbox class="filter-item" @change="tableKey=tableKey+1" v-model="showAuditor">显示详细</el-checkbox>
    </div>
    <el-table
      height="400"
      @selection-change="selsChange"
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.enable === '1' ? 'success' : 'error'"
          >{{scope.row.enable | enableFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="优先级别" prop="level" width="100">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.level === '1' ? 'success' : 'error'"
          >{{scope.row.level | levelFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="计划类型" prop="type" width="100">
        <template slot-scope="scope">
          <el-tag
            size="mini"
            :type="scope.row.type  === '1' ? 'success' : 'error'"
          >{{scope.row.type | typeFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="培训日期" prop="date" width="100"></el-table-column>
      <el-table-column label="培训时间" prop="time" width="80"></el-table-column>
      <el-table-column v-if="showAuditor" label="培训地点" prop="place" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="培训课时" prop="hour" width="150">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.hour === '1' ? 'success' : 'error'"
          >{{scope.row.hour | hourFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="培训班组" prop="orgDescr" width="150">
        <template slot-scope="scope">
          <el-tag :key="tag" v-for="tag in scope.row.orgDescr">{{tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="培训岗位" prop="post" width="150"></el-table-column>
      <el-table-column label="授课人" prop="teacher" width="150">
        <template slot-scope="scope">
          <el-tag
            :key="tag"
            v-for="tag in scope.row.teacher"
            :disable-transitions="false"
            @close="handleClose(tag)"
          >{{tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="培训对象" prop="students" width="150">
        <template slot-scope="scope">
          <el-tag :key="tag" v-for="tag in scope.row.students">{{tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="是否已发送签到验证" prop="sendReg" width="100">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.level === '1' ? 'success' : 'error'"
          >{{scope.row.sendReg | sendRegFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="已签到人员" prop="regNo" width="150">
        <template slot-scope="scope">
          <el-tag :key="tag" v-for="tag in scope.row.regNo">{{tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="已签到人数" prop="regNum" min-width="100"></el-table-column>
      <el-table-column v-if="showAuditor" label="未签到人员" prop="leftNo" width="150">
        <template slot-scope="scope">
          <el-tag :key="tag" v-for="tag in scope.row.leftNo">{{tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="未签到人数" prop="leftNum" min-width="100"></el-table-column>
      <el-table-column v-if="showAuditor" label="培训形式" prop="form" width="150">
        <template slot-scope="scope">
          <el-tag :key="tag" v-for="tag in scope.row.form" :disable-transitions="false">{{tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="备注" prop="remark" width="150">
      </el-table-column>
      <el-table-column v-if="showAuditor" label="培训类别" prop="cate" width="150">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.cate === '1' ? 'success' : 'error'"
          >{{scope.row.cate | cateFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="培训项目" prop="item" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="培训目的" prop="aim" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="培训内容" prop="content" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="培训材料" show-overflow-tooltip prop="files">
        <template slot-scope="scope">
          <a
            :href="downloadUrl+'?generateWord='+ fl.ikey+'&fileName='+encodeURI(encodeURI(fl.name))"
            target="_blank"
            v-for="fl in scope.row.files"
            :key="fl.ikey"
            v-text="fl.name"
          ></a>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="关联规章制度" width="200">
        <template slot-scope="scope">
          <a
            :href="downloadUrl+'?generateWord=' +key +'&fileName='+ encodeURI(encodeURI(scope.row.ruleLabel[index]))"
            target="_blank"
            v-for="(key,index) in scope.row.ruleValue"
            :key="index"
          >{{scope.row.ruleLabel[index]}}</a>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="学习资料库" width="200">
        <!-- <template scope="scope" >
     <el-tag v-for="file in scope.row.fileLib" :key="file.fileValue" >{{file.fileLabel}}</el-tag>
        </template>-->
        <template slot-scope="scope">
          <!-- 直接显示文件名称 -->
          <!-- <el-tag v-for="(file,index) in scope.row.fileLabel" :key="index">{{file}}</el-tag> -->
          <!-- 文件名称加外网下载链接 -->
          <!-- <a :href="downloadUrlQn+key+'?attname='+encodeURI(encodeURI(scope.row.fileLabel[index]))" target="_blank" v-for="(key,index) in scope.row.fileQNkey" :key="index">{{scope.row.fileLabel[index]}}</a> -->
          <!-- 桌面端连接内网下载或预览 -->
          <a
            :href="downloadUrl+'?generateWord=' +key +'&fileName='+ encodeURI(encodeURI(scope.row.fileLabel[index]))"
            target="_blank"
            v-for="(key,index) in scope.row.fileValue"
            :key="index"
          >{{scope.row.fileLabel[index]}}</a>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="培训总结" prop="summary" width="150"></el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="handleUpdate(scope.row)">培训记录</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="scoreEntry(scope.row)">分数录入/查看</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column  label='已生成培训人次信息' prop="finished" width="150">
        <template scope="scope">
            <el-tag size="medium" :type="scope.row.hour === '1' ? 'success' : 'error'">{{scope.row.hour | finishedFilter}}</el-tag>
        </template>
      </el-table-column>-->
    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-sizes="[10,20,30,50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :fullscreen="true">
      <el-form
        class="small-space"
        :model="temp"
        :rules="rules"
        ref="form"
        label-position="left"
        label-width="70px"
        style="width: 650px; margin-left:50px;"
      >
        <el-form-item label="培训课程">
          <el-button type="primary" @click="showClasses">添加培训课程</el-button>
          <el-table :data="temp.acreList" size="medium">
            <el-table-column type="index" width="60"></el-table-column>
            <el-table-column label="岗位性质" prop="scope.row.postDescr">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.tyds}}</span>
              </template>
            </el-table-column>
            <el-table-column label="课程等级" width="90" prop="scope.row.level">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.level}}</span>
              </template>
            </el-table-column>
            <el-table-column label="培训课程" width="90" prop="scope.row.clds">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.clds}}</span>
              </template>
            </el-table-column>
            <el-table-column label="课时" prop="scope.row.hour">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.hour}}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="scope.row.enable">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.enable | pEnableFilter}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEditAcre(scope.$index, scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="累计课时" prop="hour2">
          <el-input placeholder="累计课时" v-model="temp.hour2" :disabled="true"></el-input>
        </el-form-item>
         <el-form-item label="是否关联规章制度" prop="relaRule">
          <el-radio-group v-model="temp.relaRule">
            <el-radio-button label="是"></el-radio-button>
            <el-radio-button label="否"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关联规章制度">
          <file-tree2
            :dcksQNKey.sync="temp.ruleQNkey"
            :dcksValue.sync="temp.ruleValue"
            :dcksLabel.sync="temp.ruleLabel"
            :isMultiple="true"
            :checkStrictly="true"
            :showCheckbox="true"
            :isDialog="false"
            descrName="运营规章"
            :rootId="4"
          ></file-tree2>
        </el-form-item>
        <el-form-item label="优先级别" prop="level">
          <el-select v-model="temp.level" clearable placeholder="请选择">
            <el-option
              v-for="item in levelOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划类型" prop="type">
          <el-select v-model="temp.type" clearable placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学习资料库">
          <file-tree
            :dcksQNKey.sync="temp.fileQNkey"
            :dcksValue.sync="temp.fileValue"
            :dcksLabel.sync="temp.fileLabel"
            :isMultiple="true"
            :checkStrictly="true"
            :showCheckbox="true"
            :isDialog="false"
          ></file-tree>
        </el-form-item>
        <el-form-item label="培训日期" prop="date">
          <el-date-picker
            v-model="temp.date"
            align="right"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="培训时间" prop="time">
          <el-time-select
            v-model="temp.time"
            clearable
            :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
            placeholder="选择时间"
          ></el-time-select>
        </el-form-item>
        <el-form-item label="培训地点" prop="place">
          <el-input v-model="temp.place"></el-input>
        </el-form-item>
        <el-form-item label="需要培训小结" prop="needSum">
          <el-select v-model="temp.needSum" clearable placeholder="请选择">
            <el-option
              v-for="item in needSumOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训班组" prop="orgCode">
          <org-tree
            :dcksValue.sync="temp.orgCode"
            :dcksLabel.sync="temp.orgDescr"
            :checkStrictly="true"
            :isDialog="true"
          ></org-tree>
          <!-- {{temp.orgCode}} {{temp.orgDescr}} -->
        </el-form-item>
        <el-form-item label="授课人" prop="teacher">
          <cmts :dynamicTags="temp.teacher"></cmts>
        </el-form-item>
        <el-form-item label="培训对象" prop="students">
          <cmts :dynamicTags="temp.students"></cmts>
        </el-form-item>
        <el-form-item label="培训形式" prop="form">
          <el-select v-model="temp.form" clearable multiple placeholder="请选择">
            <el-option
              v-for="item in formOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训类别" prop="cate">
          <el-select v-model="temp.cate" clearable placeholder="请选择">
            <el-option
              v-for="item in cateOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训目的" prop="aim">
          <el-input type="textarea" autosize v-model="temp.aim"></el-input>
        </el-form-item>
        <el-form-item label="培训内容" prop="content">
          <el-input type="textarea" autosize v-model="temp.content"></el-input>
        </el-form-item>
        <el-form-item label="培训总结" prop="summary">
          <el-input type="textarea" autosize v-model="temp.summary"></el-input>
        </el-form-item>
        <el-form-item label="培训状态" prop="enable">
          <el-select v-model="temp.enable" placeholder="请选择">
            <el-option
              v-for="item in enableOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训材料" prop="files">
          <Fileup :vfiles.sync="temp.files"></Fileup>
        </el-form-item>
        <el-form-item label="培训岗位" prop="post">
          <el-input v-model="temp.post"></el-input>
        </el-form-item>
        <el-form-item label="培训项目" prop="item">
          <el-input type="textarea" autosize v-model="temp.item"></el-input>
        </el-form-item>
        <el-form-item label="培训课时" prop="hour">
          <el-select v-model="temp.hour" clearable placeholder="请选择">
            <el-option
              v-for="item in hourOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" autosize v-model="temp.remark"></el-input>
        </el-form-item>
      </el-form>
      <el-table :data="temp.issueList">
        <el-table-column type="index" width="60"></el-table-column>
        <el-table-column label="问题种类" width="90" prop="scope.row.type">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{scope.row.type}}</span>
          </template>
        </el-table-column>
        <el-table-column label="问题描述" prop="scope.row.content">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{scope.row.content}}</span>
          </template>
        </el-table-column>
        <el-table-column label="问题状态" prop="scope.row.enable">
          <template slot-scope="scope">
            <el-tag
              size="medium"
              :type="scope.row.enable === '1' ? 'success' : 'error'"
            >{{scope.row.enable | issueEnableFilter}}</el-tag>
          </template>
        </el-table-column>
        <!-- <template slot-scope="scope"><span style="margin-left: 10px">{{scope.row.enable}}</span></template> -->
        <!-- </el-table-column> -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="warning" @click="addDomain">新增培训问题</el-button> -->
        <el-button v-if="dialogStatus=='update'" type="warning" @click="addIssue">新增培训问题</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- <el-button v-if="dialogStatus=='create'" type="primary" @click="create">确 定</el-button> -->
        <el-button v-if="dialogStatus=='update'" type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="textMap[issueDialogStatus]" :visible.sync="issueDialogFormVisible">
      <el-form :model="issue" :rules="rules3" ref="form3">
        <el-form-item label="问题种类" prop="type">
          <el-input v-model="issue.type" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="问题描述" prop="content">
          <el-input v-model="issue.content" placeholder="输入"></el-input>
        </el-form-item>
        <el-form-item v-if="issueDialogStatus=='update'" label="问题状态">
          <el-select v-model="issue.enable" placeholder="请选择">
            <el-option
              v-for="item in issueOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
          <!-- <el-input v-model="issue.enable" placeholder="输入"></el-input> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="issueDialogFormVisible = false">取 消</el-button>
        <el-button v-if="issueDialogStatus=='create'" type="primary" @click="createIssue">确 定</el-button>
        <el-button v-else type="primary" @click="updateIssue">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="textMap[clstDialogStatus]" :visible.sync="clstDialogFormVisible">
      <el-form :model="acre" :rules="rules2" ref="form2">
        <el-form-item label="岗位性质" prop="poca">
          <el-select v-model="acre.poca" placeholder="选择培训岗位性质" @change="changeClstLevel">
            <el-option
              v-for="item in pocas"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程等级" prop="level">
          <el-select v-model="acre.level" placeholder="请选择等级" @change="changeClst">
            <el-option v-for="item in levels" :key="item.value" :value="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训课程" prop="clst">
          <el-select v-model="acre.clst" placeholder="请选择课程">
            <el-option
              v-for="item in clsts"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课时" prop="hour">
          <el-input-number v-model="acre.hour" :step="0.5"></el-input-number>
        </el-form-item>
        <el-form-item label="状态" v-if="clstDialogStatus=='update'" prop="enable">
          <el-select v-model="acre.enable" clearable placeholder="请选择">
            <el-option
              v-for="item in pEnableOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="clstDialogStatus=='create'" type="primary" @click="addAcre">新 增</el-button>
        <el-button v-else type="primary" @click="updateAcre">更 新</el-button>
        <el-button @click="clstDialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="textMap[scoreDialogStatus]"
      :visible.sync="scoreDialogFormVisible"
      width="40%"
    >
      <el-table
        :data="temp.tableData"
        :rules="rules4"
        style="width: 100%"
        class="tb-edit"
        @row-click="handleCurrentChange2"
      >
        <el-table-column type="index" width="60"></el-table-column>
        <el-table-column prop="num" label="工号" width="120"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column label="分数" prop="score" width="160">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model="scope.row.score"
              placeholder="请输入分数"
              @change="handleEditScore(scope.$index, scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="编辑" width="120">
        <template slot-scope="scope">
          <el-button :type="scope.row.edit?'success':'primary'" @click='scope.row.edit=!scope.row.edit' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
        </template>
        </el-table-column>-->
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="scoreDialogFormVisible = false">取 消</el-button>
        <el-button v-if="scoreDialogStatus=='create'" type="primary" @click="insertScore">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
import { fetchList, update, del, queryScore, insertScore } from "@/api/actual";
import { pocaSel, getClstLevel, getClstList } from "@/api/plan";
// import { fetchMemberList } from "@/api/member";
import cmts from "@/components/Customer/csMemberTags";
import Fileup from "@/components/fileup/fileup";
import orgTree from "@/components/OrgTree/orgTree";
import fileTree from "@/components/FileTree/fileTree";
import waves from "@/directive/waves/index.js"; // 水波纹指令
import { mapGetters } from "vuex";
import fileTree2 from "@/components/FileTree/fileTree2";

export default {
  name: "x",
  directives: {
    waves
  },
  components: { cmts, orgTree, Fileup, fileTree, fileTree2 },
  computed: {
    ...mapGetters(["name", "roles", "myWorkShop"])
  },
  data() {
    return {
      //   uploadUrl: process.env.uploadUrl,
      downloadUrl: process.env.downloadUrl,
      sels: [],
      list: null,
      showAuditor: false,
      total: null,
      listQuery: {
        page: 1,
        limit: 20,
        orgCode: [],
        orgDescr: [],
        // location: undefined,
        // descr: undefined,
        date: undefined,
        // sort: "+id",
        sort: "-date",
        item: ""
      },
      dateSech: "2019-01-01",
      typeOptions: [
        { value: "0", label: "月计划" },
        { value: "1", label: "临时计划" }
      ],
      levelOptions: [
        { value: "0", label: "高" },
        { value: "1", label: "中" },
        { value: "2", label: "低" }
      ],
      formOptions: [
        { value: "理论", label: "理论" },
        { value: "实操", label: "实操" },
        { value: "演练", label: "演练" },
        { value: "技术比武", label: "技术比武" }
      ],
      cateOptions: [
        { value: "0", label: "质量" },
        { value: "1", label: "安全" },
        { value: "2", label: "技术" },
        { value: "3", label: "管理" },
        { value: "4", label: "其他" }
      ],
      hourOptions: [
        { value: "1", label: "1课时" },
        { value: "2", label: "2课时" },
        { value: "3", label: "3课时" },
        { value: "4", label: "4课时" }
      ],
      needSumOptions: [
        { value: "0", label: "否" },
        { value: "1", label: "是" }
      ],
      enableOptions: [
        { value: "0", label: "未完成" },
        { value: "1", label: "已完成" },
        { value: "-1", label: "取消" }
      ],
      temp: {
        id: undefined,
        enable: "",
        level: "",
        type: "",
        orgCode: [],
        orgDescr: [],
        date: "",
        time: "",
        place: "",
        form: [],
        cate: "",
        item: "",
        aim: "",
        hour: "",
        hour2: "",
        teacher: [],
        content: "",
        post: "",
        students: [],
        scoreFinished: "",
        summary: "",
        needSum: "",
        files: [],
        fileQNkey: [],
        fileValue: [],
        fileLabel: [],
        issueList: [],
        ruleQNKey: [],
        ruleValue: [],
        ruleLable: [],
        acreList: [],
        tableData: [],
        remark :""
        // plan: undefined
      },
      issue: {
        id: undefined,
        type: "",
        content: "",
        enable: ""
      },
      issueOptions: [
        { value: "0", label: "无效" },
        { value: "1", label: "有效" }
      ],
      tag: "",
      key: [],
      delids: {
        ids: ""
      },
      textMap: {
        update: "编辑",
        create: "创建",
        read: "查看"
      },
      dialogFormVisible: false,
      dialogStatus: "",
      issueDialogStatus: "",
      tableKey: 0,
      rules: {
        enable: [{ required: true, message: "请选择状态", trigger: "blur" }],
        level: [{ required: true, message: "请选择优先级别", trigger: "blur" }],
        type: [{ required: true, message: "请选择计划类型", trigger: "blur" }],
        date: [{ required: true, message: "请选择培训日期", trigger: "blur" }],
        time: [{ required: true, message: "请选择培训时间", trigger: "blur" }],
        place: [{ required: true, message: "请填写培训地点", trigger: "blur" }],
        needSum: [
          { required: true, message: "请选择是否需要培训小结", trigger: "blur" }
        ],
        orgCode: [
          { required: true, message: "请选择培训班组", trigger: "blur" }
        ],
        teacher: [{ required: true, message: "请选择授课人", trigger: "blur" }],
        students: [
          { required: true, message: "请选择培训对象", trigger: "blur" }
        ],
        form: [{ required: true, message: "请选择培训形式", trigger: "blur" }],
        cate: [{ required: true, message: "请选择培训类别", trigger: "blur" }],
        item: [
          {
            required: true,
            max: 255,
            message: "长度小于255个字符",
            trigger: "blur"
          }
        ],
        aim: [
          {
            required: true,
            max: 255,
            message: "长度小于255个字符",
            trigger: "blur"
          }
        ],
        content: [
          {
            required: true,
            max: 800,
            message: "长度小于800个字符",
            trigger: "blur"
          }
        ]
      },
      rules2: {
        poca: [{ required: true, message: "请选择岗位性质", trigger: "blur" }],
        level: [{ required: true, message: "请选择课程等级", trigger: "blur" }],
        clst: [{ required: true, message: "请选择课程", trigger: "blur" }],
        hour: [{ required: true, trigger: "blur" }],
        enable: [{ required: true, trigger: "blur" }]
      },
      rules3: {
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        content: [{ required: true, message: "请选择内容", trigger: "blur" }]
      },
      rules4: {
        score: [{ required: true, message: "请输入分数", trigger: "blur" }]
      },
      studScores: [],
      // tableData: [],
      scoreRows: [],
      scoreDialogFormVisible: false,
      scoreDialogStatus: "",
      issueDialogFormVisible: false,
      clstDialogFormVisible: false,
      clstList: [],
      clstDialogStatus: "",
      acre: {
        poca: "",
        postDescr: "",
        level: "",
        clst: "",
        hour: 1,
        tyds: "",
        clst: ""
      },
      //   posts: [],   //岗位
      pocas: [], //岗位性质
      clstList: [],
      clsts: [],
      levels: [],
      pEnableOptions: [
        { value: "0", label: "无效" },
        { value: "1", label: "有效" }
        // { value: "2", label: "已审核"},
      ]

      // pickerOptions1: {
      //   shortcuts: [
      //     {
      //       text: "今天",
      //       onClick(picker) {
      //         picker.$emit("pick", new Date());
      //       }
      //     },
      //     {
      //       text: "昨天",
      //       onClick(picker) {
      //         const date = new Date();
      //         date.setTime(date.getTime() - 3600 * 1000 * 24);
      //         picker.$emit("pick", date);
      //       }
      //     },
      //     {
      //       text: "一周前",
      //       onClick(picker) {
      //         const date = new Date();
      //         date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      //         picker.$emit("pick", date);
      //       }
      //     }
      //   ]
      // }
    };
  },
  created() {
    this.getList();
    // this.getPocas();
  },

  filters: {
    enableFilter: function(value) {
      if ("0" === value) {
        return "未完成";
      } else if ("1" === value) {
        return "已完成";
      } else if ("-1" === value) {
        return "取消";
      }
    },
    issueEnableFilter: function(value) {
      if ("0" === value) {
        return "无效";
      } else if ("1" === value) {
        return "有效";
      }
    },
    levelFilter: function(value) {
      if ("0" === value) {
        return "高";
      } else if ("1" === value) {
        return "中";
      } else if ("2" === value) {
        return "低";
      }
    },
    sendRegFilter: function(value) {
      if ("1" === value) {
        return "是";
      } else {
        return "否";
      }
    },
    typeFilter: function(value) {
      if ("0" === value) {
        return "月计划";
      } else if ("1" === value) {
        return "临时计划";
      }
    },
    hourFilter: function(value) {
      if ("1" === value) {
        return "1课时";
      } else if ("2" === value) {
        return "2课时";
      } else if ("3" === value) {
        return "3课时";
      } else if ("4" === value) {
        return "4课时";
      }
    },

    cateFilter: function(value) {
      if ("0" === value) {
        return "质量";
      } else if ("1" === value) {
        return "安全";
      } else if ("2" === value) {
        return "技术";
      } else if ("3" === value) {
        return "管理";
      } else if ("4" === value) {
        return "其他";
      }
    },
    // formFilter: function(value) {
    //   if ("0" === value) {
    //     return "理论";
    //   } else if ("1" === value) {
    //     return "实操";
    //   } else if ("2" === value) {
    //     return "演练";
    //   } else if ("3" === value) {
    //     return "技术比武";
    //   }
    // },
    finishedFilter: function(value) {
      if ("0" === value) {
        return "否";
      } else if ("1" === value) {
        return "是";
      }
    },
    pEnableFilter: function(value) {
      if ("0" === value) {
        return "无效";
      } else if ("1" === value) {
        return "有效";
      }
    }
  },
  methods: {
    getList() {
      // console.log(location.href)
      // console.log(document.URL)
      this.$store.dispatch("openLoading");
      fetchList(this.listQuery).then(response => {
        // debugger
        // console.log(response.data);
        if (response.status === 200 && response.data.code === 2000) {
          this.list = response.data.items;
            // console.log(this.list);
            for(var x of this.list){
              // console.log(x)
                if(x.sendReg==='1'){
                    x.regNum = x.regNo.length;
                    x.leftNum = x.leftNo.length;
                }
            }
          this.total = response.data.total;
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        this.$store.dispatch("closeLoading");
      });
    },
    dateSechChange(val) {
      this.listQuery.date = val;
    },

    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },

    handleUpdate(row) {
      // this.temp = Object.assign({}, row);
      this.temp = JSON.parse(JSON.stringify(row));
      // console.log("handleUpdate", this.temp);
      // 0，未完成；1，已完成；-1，取消
      //   1，已完成状态---需要可以查看培训信息
      //  未完成才能修改
      if (this.temp.enable === "0") {
        var index = 0;
        for (const x of this.temp.teacher) {
          index += x.indexOf(this.name);
        }
        // 授课人与车间培训管理员都可以编辑未完成的培训实际
        if (
          index > -1 * this.temp.teacher.length ||
          this.roles.indexOf("TRI002") > -1
        ) {
          //   if (
          //     this.temp.workShopId === "" ||
          //     this.temp.workShopId === null ||
          //     this.temp.workShopId === this.myWorkShop
          //   ) {
          this.dialogStatus = "update";
          this.dialogFormVisible = true;
          //   } else {
          //     this.$notify({
          //       title: "失败",
          //       message: "无权限，更新失败(仅可修改本车间培训记录)",
          //       type: "error",
          //       duration: 2000
          //     });
          //   }
        } else {
          this.$notify({
            title: "失败",
            message:
              "无权限，更新失败(非授课人或中心培训管理人员,无法修改培训记录)",
            type: "error",
            duration: 2000
          });
        }
      } else if (this.temp.enable === "1") {
        if (this.roles.indexOf("TRI001") > -1) {
          this.dialogStatus = "update";
          this.dialogFormVisible = true;
        } else {
          this.dialogStatus = "read";
          this.dialogFormVisible = true;
        }
      } else {
        this.$notify({
          title: "失败",
          message: "更新失败",
          type: "error",
          duration: 2000
        });
      }
    },
    scoreEntry(row) {
      this.temp = JSON.parse(JSON.stringify(row));
      if (this.temp.enable === "1") {
        // console.log("scoreEntry-this.temp", this.temp);
        // 未录入分数则显示分数录入界面;若已录入分数,则显示分数并按照分数排序
        if (this.temp.scoreFinished != "1") {
          var index = 0;
          for (const x of this.temp.teacher) {
            index += x.indexOf(this.name);
          }
          if (
            index > -1 * this.temp.teacher.length ||
            this.roles.indexOf("TRI002") > -1
          ) {
            this.temp.tableData = [];
            for (var x of this.temp.students) {
              this.sData = {
                num: "",
                name: "",
                score: ""
              };
              this.sData.num = x.substring(0, 6);
              this.sData.name = x.substring(7);
              this.temp.tableData.unshift(this.sData);
            }
            this.scoreDialogStatus = "create";
            this.scoreDialogFormVisible = true;
          } else {
            this.$notify({
            title: "失败",
            message: "暂无分数录入",
            type: "error",
            duration: 2000
          });
          }
        } else {
          queryScore(this.temp.id).then(response => {
            if (response.status === 200 && response.data.code === 2000) {
              console.log(response.data)
              this.temp.tableData = response.data.items;
              var index = 0;
              for (const x of this.temp.teacher) {
                    index += x.indexOf(this.name);
              }
              if (
                index > -1 * this.temp.teacher.length ||
                this.roles.indexOf("TRI002") > -1
              ){
                this.scoreDialogStatus = "create";
                this.scoreDialogFormVisible = true;
              } else{
                this.scoreDialogStatus = "read";
              this.scoreDialogFormVisible = true;
              }
              
            } else {
              console.log(response);
              this.$notify({
                title: "失败1",
                message: response.status + response.data.msg,
                type: "error",
                duration: 2000
              });
            }
            this.$store.dispatch("closeLoading");
          });
        }
      } else {
        this.$notify({
          title: "失败",
          message: "培训未完成,无法录入分数！",
          type: "error",
          duration: 2000
        });
      }
    },
    handleCurrentChange2(row, event, column) {
      // console.log("handleCurrentChange2");
      // console.log("row",row,"event",event,"colunm",column,"event.currentTarget",event.currentTarget);
    },
    handleEditScore(index, row) {
      // console.log("handleEditScore");
      // console.log("index", index);
      // console.log("row", row);
      const index2 = this.temp.tableData.indexOf(row);
      this.temp.tableData.splice(index2, 1, row);
      // console.log("this.tableData", this.temp.tableData);
      // var single = {
      //     index: "",
      //     num: "",
      //     name: "",
      //     score: ""
      // };
      // single.index = index;
      // single.num = row.num;
      // single.name = row.name;
      // single.score = row.score;
      // this.studScores.push(single);
    },
    // handleDelete(index, row) {
    //     console.log(index, row);
    // },
    insertScore() {
      // console.log("this.temp", this.temp);
      // console.log("this.tableData", this.temp.tableData);
      // , this.tableData
      insertScore(this.temp).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          //  this.scoreDialogStatus = "create";
          this.scoreDialogFormVisible = false;
          this.$notify({
            title: "成功",
            message: "分数录入成功",
            type: "success",
            duration: 2000
          });
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        this.$store.dispatch("closeLoading");
      });
      // console.log();
    },
    selsChange(sels) {
      this.sels = sels;
    },
    showClasses() {
      this.clstDialogFormVisible = true;
      this.clstDialogStatus = "create";
      this.resetAcre();
      this.getPocas();
    },
    resetAcre() {
      this.acre = {
        id: undefined,
        poca: "",
        level: "",
        clst: "",
        hour: 1,
        enable: "1"
      };
    },
    getPocas() {
      pocaSel().then(response => {
        // debugger
        this.pocas = response.data.items;
      });
    },
    changeClstLevel() {
      // console.log("changeClstLevel-this.acre.poca", this.acre.poca);
      getClstLevel(this.acre.poca).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.levels = response.data.items;
          this.acre.level = "";
          this.acre.clst = "";
          //   console.log(this.levels);
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        this.$store.dispatch("closeLoading");
      });
    },
    changeClst() {
      // console.log("changeClst-this.acre.poca", this.acre.poca);
      // console.log("changeClst-this.acre.level", this.acre.level);
      getClstList(this.acre.poca, encodeURI(encodeURI(this.acre.level))).then(
        response => {
          if (response.status === 200 && response.data.code === 2000) {
            this.clsts = response.data.items;
          } else {
            console.log(response);
            this.$notify({
              title: "失败1",
              message: response.status + response.data.msg,
              type: "error",
              duration: 200000
            });
          }
          this.$store.dispatch("closeLoading");
        }
      );
    },
    addAcre() {
      this.$refs["form2"].validate(async valid => {
        if (valid) {
          this.getTyds();
          this.getClds();
          this.temp.acreList.unshift(this.acre);
          this.clstDialogFormVisible = false;
          var hour = 0;
          for (var x of this.temp.acreList) {
            if (x.enable === "1") {
              hour = Number(hour) + Number(x.hour);
            }
          }
          this.temp.hour2 = hour;
        }
      });
    },
    getTyds() {
      for (var x of this.pocas) {
        if (x.value === this.acre.poca) {
          this.acre.tyds = x.label;
        }
      }
    },
    getClds() {
      for (var x of this.clsts) {
        if (x.value === this.acre.clst) {
          this.acre.clds = x.label;
        }
      }
    },
    updateAcre() {
      this.$refs["form2"].validate(async valid => {
        if (valid) {
          for (const v of this.temp.acreList) {
            if (v.id === this.acre.id) {
              const index = this.temp.acreList.indexOf(v);
              this.getClds();
              this.getTyds();
              this.temp.acreList.splice(index, 1, this.acre);
              var hour = 0;
              for (var x of this.temp.acreList) {
                if (x.enable === "1") {
                  hour = Number(hour) + Number(x.hour);
                }
              }
              this.temp.hour2 = hour;
              break;
            }
          }
          this.clstDialogFormVisible = false;
        }
      });
    },
    // handleDel() {
    //   this.$confirm("删除?", "提示", { type: "warning" })
    //     .then(async () => {
    //       this.$store.dispatch("openLoading");
    //       const idg = this.sels.map(item => item.id); //['1','2','3']
    //       console.log(idg);
    //       this.delids.ids = this.sels.map(item => item.id).join(); //'1,2,3'
    //       const res = await del(this.delids);
    //       // debugger
    //       if (res.data.code == 2000) {
    //         for (const y of idg) {
    //           for (const v of this.list) {
    //             if (v.id === y) {
    //               const index = this.list.indexOf(v);
    //               this.list.splice(index, 1);
    //               break;
    //             }
    //           }
    //         }
    //         this.$store.dispatch("closeLoading");
    //         this.$notify({
    //           title: "成功",
    //           message: "删除成功",
    //           type: "success",
    //           duration: 2000
    //         });
    //       } else {
    //         this.$store.dispatch("closeLoading");
    //         this.$notify({
    //           title: "失败",
    //           message: "删除失败",
    //           type: "error",
    //           duration: 2000
    //         });
    //       }
    //     })
    //     .catch(() => {
    //       this.$store.dispatch("closeLoading");
    //       this.$notify({
    //         title: "失败",
    //         message: "删除失败",
    //         type: "error",
    //         duration: 2000
    //       });
    //     });
    // },

    // create() {
    //   // validate
    //   this.$store.dispatch("openLoading");
    //   this.$refs["form"].validate(async valid => {
    //     if (valid) {
    //       this.temp.org = this.$refs.tree.getCheckedKeys();
    //       console.log(this.temp);
    //       const res = await create(this.temp);
    //       // debugger
    //       if (res.data.code == 2000) {
    //         console.log(res.data);
    //         this.temp = res.data.item;
    //         this.temp.id = res.data.item.id;
    //         this.temp.enable = "1";
    //         this.list.unshift(this.temp);
    //         this.$store.dispatch("closeLoading");
    //         this.$notify({
    //           title: "成功",
    //           message: "创建成功",
    //           type: "success",
    //           duration: 2000
    //         });
    //       } else {
    //         this.$store.dispatch("closeLoading");
    //         this.$notify({
    //           title: "失败",
    //           message: "创建失败",
    //           type: "error",
    //           duration: 2000
    //         });
    //       }
    //     } else {
    //       this.$store.dispatch("closeLoading");
    //       console.log("error submit!!");
    //       return false;
    //     }
    //     this.dialogFormVisible = false;
    //   });
    // },
    update() {
      this.$store.dispatch("openLoading");
      this.$refs["form"].validate(async valid => {
        if (valid) {
          // console.log(this.temp);
          if (
            (this.temp.relaRule === "是" &&
            this.temp.ruleLabel.length == 0 &&
            this.temp.ruleValue.length == 0)
            ||( this.temp.relaRule === "否" &&
            this.temp.ruleLabel.length != 0 &&
            this.temp.ruleValue.length != 0)
          ){
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "失败",
              message: "提交失败" + ",请检查关联规章是否为空",
              type: "error",
              duration: 2000
            });
          }else{
             const res = await update(this.temp);
            //  console.log(res.data);
          if (res.data.code == 2000) {
            for (const v of this.list) {
              if (v.id === this.temp.id) {
                const index = this.list.indexOf(v);
                // 更新新增课程的id
                if(res.data.ids.length!=0){
                    var j = 0;
                       for (var i = 0; i < this.temp.acreList.length; i++) {
                            if (this.temp.acreList[i].id == null) {
                                this.temp.acreList[i].id = res.data.ids[j].id;
                                j++;
                              }
                      }
                }
                  // console.log(this.temp);
                this.list.splice(index, 1, this.temp);
                break;
              }
            }
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
          } else {
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "失败",
              message: "更新失败" + res.data.msg,
              type: "error",
              duration: 2000
            });
          }
          this.dialogFormVisible = false;
          }
         
        } else {
          this.$store.dispatch("closeLoading");
          console.log("error submit!!");
          return false;
          this.dialogFormVisible = false;
        }
        // this.dialogFormVisible = false;
      });
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        enable: "",
        level: "",
        type: "",
        orgCode: [],
        orgDescr: [],
        date: "",
        time: "",
        place: "",
        form: [],
        cate: "",
        item: "",
        aim: "",
        hour: "",
        hour2: "",
        teacher: [],
        content: "",
        post: "",
        students: [],
        scoreFinished: "",
        summary: "",
        needSum: "",
        fileQNkey: [],
        fileValue: [],
        fileLabel: [],
        relaRule: "是",
        ruleQNKey: [],
        ruleValue: [],
        ruleLable: [],
        tableData: [],
        remark: ""
      };
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },

    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "ID",
          "计划状态",
          "优先级别",
          "计划类型",
          "培训日期",
          "培训时间",
          "培训地点",
          "培训课时",
          "是否需要培训小结",
          "培训班组",
          "培训岗位",
          "授课人",
          "培训对象",
          "培训形式",
          "培训类别",
          "培训项目",
          "培训目的",
          "培训内容",
          "培训总结"
        ];
        const filterVal = [
          "id",
          "enable",
          "level",
          "type",
          "date",
          "time",
          "place",
          "hour",
          "needSum",
          "orgDescr",
          "post",
          "teacher",
          "students",
          "form",
          "cate",
          "item",
          "aim",
          "content",
          "summary"
        ];
        const data = this.formatJson(filterVal, this.list);
        excel.export_json_to_excel(tHeader, data, "培训实际");
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "tel") {
            return "不可下载";
          } else {
            // 计划状态
            if (j === "enable") {
              for (const x of this.enableOptions) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            // 优先级别
            if (j === "level") {
              for (const x of this.levelOptions) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            // 计划类型
            if (j === "type") {
              for (const x of this.typeOptions) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            // 培训课时
            if (j === "hour") {
              for (const x of this.hourOptions) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            // 需要培训小结
            if (j === "needSum") {
              for (const x of this.needSumOptions) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            // 培训形式
            //  if(j === "form"){
            //   for(const x of this.formOptions){
            //     if(x.value === v[j]){
            //       return x.label;
            //       break;
            //     }
            //   }
            // }
            // 培训类别
            if (j === "cate") {
              for (const x of this.cateOptions) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            return v[j];
          }
        })
      );
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleEditAcre(index, row) {
      this.acre = Object.assign({}, row);
      //   this.issue = JSON.parse(JSON.stringify(row));
      // console.log(this.acre);
      this.clstDialogStatus = "update";
      this.clstDialogFormVisible = true;
      this.getPocas();
      //   this.changeClstLevel();
      this.changeClst();
    },
    handleEdit(index, row) {
      this.issue = Object.assign({}, row);
      //   this.issue = JSON.parse(JSON.stringify(row));
      // console.log(this.issue);
      this.issueDialogStatus = "update";
      this.issueDialogFormVisible = true;
    },
    updateIssue() {
      // console.log(this.issue);
      this.$refs["form3"].validate(async valid => {
        if (valid) {
          for (const v of this.temp.issueList) {
            if (v.id === this.issue.id) {
              const index = this.temp.issueList.indexOf(v);
              this.temp.issueList.splice(index, 1, this.issue);
            }
          }
          this.issueDialogFormVisible = false;
        }
      });
    },
    addIssue() {
      this.resetIssue();
      this.issueDialogStatus = "create";
      this.issueDialogFormVisible = true;
    },
    createIssue() {
      this.issue.enable = "1";
      this.$refs["form3"].validate(async valid => {
        if (valid) {
          this.temp.issueList.unshift(this.issue);
          this.issueDialogFormVisible = false;
        }
      });
    },
    resetIssue() {
      this.issue = {
        id: undefined,
        type: "",
        content: "",
        enable: ""
      };
    }
  }
};
</script>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

/* * {
    margin: 0;
    padding: 0
}
body {
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    overflow: auto;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}
.tb-edit .el-input {
    display: none
}
.tb-edit .current-row .el-input {
    display: block
}
.tb-edit .current-row .el-input+span {
    display: none
} */
</style>
